<template>
  <div class="infusion">
     <Row :gutter="16" >
       <Col span="8">
        <Card style="height:710px;">
          <Tabs type="card" @on-click="changeTabs">
            <TabPane :label="`静滴(${dropsList.length})`">
              <Input placeholder="请输入患者姓名或者诊疗号" v-model="keyword" @on-enter="changeKey"  @on-clear="changeKey" clearable></Input>
              <div style="height:610px;overflow:auto;">
                <div class="ul" v-for="(item,index) in dropsList" :key="index" >
                  <div class="items">
                      <div class="item_li">
                        <!-- <div class="order">{{item.order_num}}号</div> -->
                        <div >
                          <div class="titleName">
                            <div>{{item.patient.name}} {{item.patient.age}} {{item.patient.gender}} {{item.patient.clinic_name}} {{item.patient.patient_card_id}}</div>
                            <!-- <div class="ivu-mr-16" style="color:#f00;cursor: pointer;" v-if="+item.status!==2||item.is_pass!==0" @click="changebackout(item)">撤销</div> -->
                             <Button class="ivu-mr-16" type="error" size="small" v-if="+item.status!==2||item.is_pass!==0" @click="changebackout(item)">撤销</Button>
                          </div>
                          <div class="description" v-for="drug in item.drug_list" :key="drug.drug_config_id">{{drug.drug_content}}
                             <div >
                                <Tooltip placement="right" transfer max-width="200" v-if="drug.drug_remark!==''">
                                    <div style="color:#ff9900;cursor: pointer;width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{drug.drug_remark}}</div>
                                    <template #content >
                                        <p>{{drug.drug_remark}}</p>
                                    </template>
                                </Tooltip>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="action">
                        <div class="action_ac">
                          <!-- <a @click="countDown(item, index)" :disabled="item.disabled" :class="item.isActive ? 'activeClass' : ''">{{item.content}}</a> -->
                          <a @click="countDown(item, index,1)" :disabled="jdtime>0?true:false" v-if="item.status==1&&jdShow">叫号</a>
                          <a class="activeClass" v-if="item.status==2&&item.is_pass==0" >叫号中{{jdtime}}s</a>
                          <a class="moveClass" v-if="item.status==2&&item.is_pass==1">已过号</a>
                          <Divider type="vertical" />
                          <a @click="changeInfusion(item)"  v-if="isShow">开始输液</a>
                          <Divider type="vertical" />
                          <a @click="printClick(item,1)" :class="item.print_py_num>0?'printColor':''" v-if="itShow">配药单</a>
                          <Divider type="vertical" />
                          <a @click="printClick(item,2)" :class="item.print_xs_num>0?'printColor':''" v-if="itShow">巡视单</a>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </TabPane>
            <TabPane :label="`肌注(${muscleList.length})`">
               <Input placeholder="请输入患者姓名或者诊疗号" v-model="keyword" @on-enter="changeKey"  @on-clear="changeKey" clearable></Input>
                <div style="height:610px;overflow:auto;">
                <div class="ul" v-for="(it,idx) in muscleList" :key="idx"  >
                    <div class="items">
                        <div class="item_li">
                          <!-- <div class="order">{{it.order_num}}号</div> -->
                          <div >
                            <div class="titleName">
                              <div>{{it.patient.name}} {{it.patient.age}} {{it.patient.gender}} {{it.patient.clinic_name}} {{it.patient.patient_card_id}}</div>
                              <!-- <div class="ivu-mr-16" style="color:#f00;cursor: pointer;" v-if="+it.status!==2||it.is_pass!==0" @click="changebackout(it)">撤销</div> -->
                               <Button class="ivu-mr-16" type="error" size="small" v-if="+it.status!==2||it.is_pass!==0" @click="changebackout(it)">撤销</Button>
                              </div>
                            <div class="description" v-for="jzdrug in it.drug_list" :key="jzdrug.drug_config_id">{{jzdrug.drug_content}}
                                <div >
                                    <Tooltip placement="right" transfer max-width="200" v-if="jzdrug.drug_remark!==''">
                                        <div style="color:#ff9900;cursor: pointer;width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{jzdrug.drug_remark}}</div>
                                        <template #content >
                                            <p>{{jzdrug.drug_remark}}</p>
                                        </template>
                                    </Tooltip>
                                </div>

                            </div>
                          </div>
                        </div>
                        <div class="action">
                          <div class="action_ac">
                            <!-- <a @click="countDown(it, index,2)" :class="isActive ? 'activeClass' : ''">{{content}}</a> -->
                            <a @click="countDown(it,idx,2)" :disabled="jztime>0?true:false" v-if="it.status==1&&jdShow" >叫号</a>
                            <a class="activeClass" v-if="it.status==2&&it.is_pass==0" >叫号中{{jztime}}s</a>
                            <a class="moveClass" v-if="it.status==2&&it.is_pass==1">已过号</a>
                            <Divider type="vertical" />
                            <a @click="changeInfusion(it)" v-if="isShow">开始输液</a>
                            <!-- <Divider type="vertical" />
                            <a @click="printClick(it,1)" :class="it.print_py_num>0?'printColor':''"  v-if="itShow">配药单</a> -->
                            <Divider type="vertical" />
                            <a @click="printClick(it,2)" :class="it.print_xs_num>0?'printColor':''"  v-if="itShow">巡视单</a>
                          </div>
                        </div>
                    </div>
                </div>
                </div>
            </TabPane>
          </Tabs>
        </Card>
       </Col>
      <Col span="16">
        <Card>
          <h3>患者列表</h3>
           <Row
                type="flex"
                justify="start"
                :gutter="8"
                class="ivu-mt-8 ivu-mb-8"
            >
              <Col>
                <Input placeholder="请输入诊疗号或患者姓名" v-model="searchForm.keywords" clearable @on-enter="changeEnter" @on-clear="changeEnter"></Input>
              </Col>
              <Col>
                    <DatePicker
                      v-model="searchForm.date"
                      format="yyyy-MM-dd"
                      type="daterange"
                      transfer
                      :clearable="true"
                      placement="bottom-end"
                      placeholder="操作日期选择"
                      @on-change="askDatasoperate"
                      style="width: 200px"
                    ></DatePicker>
              </Col>
              <Col>
                <Select style="width:200px" placeholder="操作类型"  v-model="searchForm.record_type" clearable @on-change="changeClinic">
                  <Option v-for="clinic in clinicLists" :value="clinic.value" :key="clinic.id">{{ clinic.title }}</Option>
                </Select>
              </Col>
              <Col>
                <Select style="width:200px" placeholder="请选择诊室"  v-model="searchForm.clinic_id" clearable @on-change="changeClinic">
                  <Option v-for="clinic in clinicList" :value="clinic.id" :key="clinic.id" v-if="clinic.status==='1'">{{ clinic.name }}</Option>
                </Select>
              </Col>
           </Row>
            <Table
                :loading="loading"
                :columns="columnsoperate"
                :data="operatedata"
            >
              <template slot-scope="{ row }" slot="hospital">
                <span>{{row.name}}</span>
                <Tag class="blueStatus ivu-ml-16" v-if="+row.in_hospital_status===1" color="primary">{{ `${+row.in_hospital_status === 1 ? '住院' : ''}` }}</Tag>
              </template>
               <template slot-scope="{ row }" slot="label">
                <Poptip word-wrap trigger="hover" placement="right" width="400">
                    <Tag v-for="(item, index) in row.tags_name_arr" :key="index" v-if="index < 3">
                        {{ item }}</Tag>
                    <div slot="content">
                        <Tag v-for="(item, index) in row.tags_name_arr" :key="index">{{ item }}</Tag>
                    </div>
                </Poptip>
            </template>
              <template slot-scope="{ row }" slot="option">
                <a @click="edit(row)" v-if="isdetail">详情</a>
                <Divider type="vertical" />
                <a @click="lineUp(row)" v-if="line">排队</a>
              </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
              <Page :total="total" :current.sync="page" show-total show-elevator :page-size="pageSize"
                  @on-change="changePage" :page-size-opts="pageOpts" show-sizer transfer
                  @on-page-size-change="changePageSize" />
            </div>
        </Card>
       </Col>
     </Row>
    <!-- 输液 -->
    <Modal
        v-model="modalstatus"
        title="信息确认"
        @on-cancel="cancel">
        <div>
          <div class="info">
            <div class="info_title">
              <span>{{infusion.patient.name}}</span>
              <span class="ivu-ml-8">{{infusion.patient.age}}岁</span>
              <span class="ivu-ml-8">{{infusion.patient.gender}}</span>
            </div>
            <div  class="ivu-ml-16 bginfo">
              <Tag>{{infusion.patient.clinic_name}} {{infusion.patient.patient_card_id}}</Tag>
            </div>
          </div>
          <h3 class="ivu-mt-16 ivu-mb-16" v-for="infus in infusion.drug_list" :key="infus.drug_config_id">{{infus.drug_content}}</h3>
          <div>
            <span class="operator">操作人</span>
            <RadioGroup v-model="infusion.operate_id" >
              <Radio v-for="radio in infusion.operate_member_list" :key="radio.id" :label="radio.id">{{radio.realname}}</Radio>
            </RadioGroup>
          </div>
        </div>
        <div slot='footer'>
              <Button @click='cancel()'>取消</Button>
              <Button type='primary' :loading="infusloading"  @click='infosave()'>确定</Button>
        </div>
    </Modal>
    <!-- 编辑操作 -->
    <Drawer
        title="患者治疗详细"
        v-model="modalDrawer"
        width="1200"
        :mask-closable="true"
    >
      <editlist ref="list" :row="row" :clinicLists="clinicLists"></editlist>
    </Drawer>
    <!-- 排队操作 -->
    <Modal v-model="linestatus" title="排队" @on-ok="lineSave" @on-cancel="lineCancel" width="650">
      <div class="ivu-mb-16" style="border-bottom:1px solid #ccc;padding:10px 0">
         <Tag v-for="(item, index) in tags_name_arr" :key="index">{{ item }}</Tag>
      </div>
      <Row>
        <Col span="12">
          <h3>静滴</h3>
          <CheckboxGroup  v-model="jddrugId">
            <Checkbox  v-for="jd in jdList" :key="jd.id" :label="jd.id" class="ivu-mt-16 line" :disabled="lineupjdwait.id!==undefined&&lineupjdwait.id!==''?true:false||+jd.surplus_num===0?true:false"> {{jd.drug_content}}({{jd.surplus_num}})
              <div v-if="+jd.surplus_num===0" style="font-size:12px;color:#ff9900">次数不够，无法进行排队</div>
            </Checkbox>
          </CheckboxGroup>
        </Col>
        <Col span="10">
          <h3>肌注</h3>
          <CheckboxGroup v-model="jzdrugId">
            <Checkbox v-for="jz in jzList" :key="jz.id" :label="jz.id" class="ivu-mt-16 line" :disabled="lineupjzwait.id!==undefined&&lineupjzwait.id!==''?true:false||+jz.surplus_num===0?true:false"> {{jz.drug_content}}({{jz.surplus_num}})
               <div v-if="+jz.surplus_num===0"  style="font-size:12px;color:#ff9900">次数不够，无法进行排队</div>
            </Checkbox>
          </CheckboxGroup>
        </Col>
      </Row>
    </Modal>
    <!-- 打印操作 -->
     <Modal v-model="printstatus" title="打印模板" @on-ok="printSave" @on-cancel="printCancel" width="1000">
         <div style="max-height:520px;overflow-y:auto">
       <div  ref="container">
         <div class="drug" v-if="printtype===1"  v-for="jzdrug in printData.drug_list" :key="jzdrug.drug_config_id">
          <div class="ivu-mb-16 fontstyle">
            <span>姓名：</span>
            <span class="dragstyle ivu-ml-16 ivu-mr-16" >{{printData.patient.name}}</span>
            <span class="ivu-ml-16">性别：</span>
            <span class="dragstyle ivu-ml-16 ivu-mr-16" >{{printData.patient.gender}}</span>
            <span class="ivu-ml-16">年龄：</span>
            <span class="dragstyle ivu-ml-16">{{printData.patient.age}}</span>
          </div>
          <div  class="ivu-mb-16 fontstyle">
            <span>诊室：</span>
            <span class="dragstyle ivu-ml-16 ivu-mr-16">{{printData.patient.clinic_name}}</span>
            <span style="margin-left:32px">诊疗号：</span>
            <span class="dragstyle ivu-ml-16">{{printData.patient.patient_card_id}}</span>
          </div>
          <div style="margin-bottom:10px;font-size:18px">配药信息<span style="font-size:16px">{{`${type===1?'（静滴）':type===2?'（肌注）':'（静滴）'}`}}</span></div>
          <h3 style="margin-bottom:15px" v-if="jzdrug.drug_type=='1'&&jzdrug.water_type!==''" >{{jzdrug.water_type}} {{jzdrug.water_volume}} ml</h3>
          <h3  v-if="+jzdrug.drug_id>0">{{jzdrug.drug_name}} {{jzdrug.drug_volume}} {{jzdrug.drug_unit}}</h3>
          <div class="inscribe">
            <!-- <span>诊室:</span>
            <span> {{printData.patient.clinic_name}}</span> -->
            <span >日期:</span>
            <span> {{`${$Date(new Date()).format('YYYY-MM-DD HH:mm:ss')}`}}</span>
          </div>
         </div>
         <div class="single"  v-if="printtype===2">
        <div v-for="(item,index) in printDataList" :key="index" :class="index+1 === printDataList.length?'singleboxs':'singlebox'">
          <h1 style="text-align:center;letter-spacing:25px;padding-top:22px" v-if="type===1||type===0">输液巡视卡</h1>
          <h1 style="text-align:center;letter-spacing:25px;padding-top:22px" v-else>肌肉注射单</h1>
          <div class="druginfo">
            <div class="infobox name">
              <div>姓名:</div>
              <div class="dragname dragnames">{{printData.patient.name}}</div>
            </div>
            <div class="infobox">
              <div>性别:</div>
              <div class="dragname dragnames">{{printData.patient.gender}}</div>
            </div>
            <div class="infobox">
              <div>年龄:</div>
              <div class="dragname dragnames">{{printData.patient.age}}</div>
            </div>
            <div class="infobox">
              <div>诊室:</div>
              <div class="dragname">{{printData.patient.clinic_name}}</div>
            </div>
            <div class="infobox">
              <div>诊疗号:</div>
              <div class="dragname">{{printData.patient.patient_card_id}}</div>
            </div>
          </div>
          <div class="container" v-if="type===1||type===0">
            <div class="contbox">药名、剂量、用法</div>
            <div  class="contbox">滴数</div>
            <div  class="contbox">执行时间</div>
            <div  class="contbox">签名</div>
            <template v-for="printdrug in item" >
              <div class="contbox drugline" :key="printdrug.drug_config_id">
                <div class="ml" v-if="printdrug.drug_type=='1'&&printdrug.water_type!==''"><div>{{printdrug.water_type}}</div><div>{{printdrug.water_volume}} ml</div></div>
                <div class="ml" v-if="+printdrug.drug_id>0"><div>{{printdrug.drug_name}}</div><div>{{printdrug.drug_volume}} {{printdrug.drug_unit}}</div></div>
              </div>
              <div class="contbox">40-60 滴/分</div>
              <div class="contbox" ></div>
              <div class="contbox" ></div>
            </template>
            <div class="ivu-mt-16" style="text-align: left;">
              <span> {{`${$Date(new Date()).format('YYYY-MM-DD HH:mm:ss')}`}}</span>
            </div>
          </div>
          <div class="containerelse"  v-else>
            <div class="contbox">药名、剂量、用法</div>
            <div  class="contbox">执行时间</div>
            <div  class="contbox">签名</div>
            <template v-for="printdrug in item" >
              <div class="contbox drugline" :key="printdrug.drug_config_id">
                <!-- <div class="ml" v-if="printdrug.drug_type=='1'"><div>{{printdrug.water_type}}</div><div>{{printdrug.water_volume}} ml</div></div> -->
                <div class="ml"><div>{{printdrug.drug_name}}</div><div>{{printdrug.drug_volume}} {{printdrug.drug_unit}}</div></div>
              </div>
              <div class="contbox" ></div>
              <div class="contbox" ></div>
            </template>
            <div class="ivu-mt-16" style="text-align: left;">
              <span> {{`${$Date(new Date()).format('YYYY-MM-DD HH:mm:ss')}`}}</span>
            </div>
          </div>
         </div>
       </div>
       </div>
       </div>
     </Modal>
  </div>
</template>
<script>
    import { mapGetters } from 'vuex';
    import util from '@/libs/util'
    import editlist from './../compents/editlist.vue'
    import { queueList, queueInfo, queueInfusion, patientdrugList, queueCreate, queueCall, patientList, updatePrint, infusiontreatmentrecordtype, queueCancel } from '@/api/infusion.js'
    import { GetClinicList } from '@/api/setting.js'
    import dayjs from 'dayjs'
    export default {
        components: { editlist },
        data () {
            return {
                jdShow: false,
                itShow: false,
                isShow: false,
                isdetail: false,
                line: false,
                content: '叫号',
                totalTime: '',
                canClick: true,
                lineClick: true,
                isActive: false,
                modalstatus: false,
                animal: '',
                searchForm: {
                    record_type: '',
                    keywords: '',
                    date: [new Date(), new Date()],
                    clinic_id: ''
                },
                clinicList: [],
                clinicLists: [],
                operatedata: [],
                operateloading: false,
                columnsoperate: [
                    {
                        title: '基本信息',
                        // key: 'name',
                        slot: 'hospital',
                        fixed: 'left',
                        width: 160

                    },
                    // { title: '住院',
                    //   slot: 'hospital',
                    //   minWidth: 130
                    // },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        width: 120
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        minWidth: 120
                    },
                    { title: '标签',
                      slot: 'label',
                      minWidth: 180
                    },
                    {
                        title: '上次操作时间',
                        key: 'last_operate_time',
                        width: 200
                    },
                    {
                        title: '类型',
                        key: 'type_name',
                        width: 120
                    },
                    {
                        title: '操作',
                        slot: 'option',
                        width: 140
                    }
                ],
                page: 1,
                pageSize: 10,
                total: 0,
                pageOpts: [10, 20, 30, 50],
                loading: false,
                modalDrawer: false,
                linestatus: false,
                printstatus: false,
                type: 0,
                jdtime: 0,
                jztime: 0,
                keyword: '',
                dropsList: [], // 静滴
                copydropsList: [],
                muscleList: [], // 肌注
                copymuscleList: [],
                infusion: {
                    patient: {
                        name: ''
                    },
                    operate_id: ''

                }, // 输液
                infusloading: false,
                // 排队操作
                jddrugId: [], // 排队静滴
                jzdrugId: [], // 排队肌注
                patient_user_id: '', // id
                jd_wait: {}, // 不同账号登录叫号中数据
                jdList: [],
                jzList: [],
                lineupjdwait: [],
                lineupjzwait: [],
                // 编辑
                row: '',
                // 打印操作
                printtype: null,
                printData: {},
                queue_id: '',
                jdclock: '',
                jzclock: '',
                clock: '',
                muscle: '',
                printDataList: [],
                tags_name_arr: [] // 标签
            }
        },
        created () {
            this.getqueueList()
            this.getclinicList()
            this.getpatientList()
            this.$websocket.closeWebsocket()
            this.$websocket.createWebSocket()
            let token = util.cookies.get('token');
            let currentProject = localStorage.getItem('currentProject')
            if (token) {
                let msg = {
                    'msgType': 'byAuth',
                    'checkType': 1,
                    'content': {
                        'token': token,
                        'projectId': currentProject
                    }
                }
                this.$websocket.sendSock(msg)
            }
        },
        computed: {
            ...mapGetters('websocket/websocketfun', ['getqueuestatus', 'getpatient'])
        },
        watch: {
            getqueuestatus: {
                handler (newValue, oldValue) {
                    if (newValue !== oldValue) {
                        this.getqueueList()
                    }
                }
            },
            getpatient: {
                handler (newValue, oldValue) {
                    if (newValue !== oldValue) {
                        this.getpatientList()
                    }
                }
            }
        },
        mounted () {
            this.state = JSON.parse(localStorage.getItem('poweredit'));
            for (let item of this.state) {
                if (item.name === '输液大厅叫号') {
                    this.jdShow = item.bool
                } else if (item.name === '输液大厅开始输液') {
                    this.isShow = item.bool
                } else if (item.name === '输液大厅配药单巡视单') {
                    this.itShow = item.bool
                } else if (item.name === '输液大厅详情') {
                    this.isdetail = item.bool
                } else if (item.name === '输液大厅排队') {
                    this.line = item.bool
                }
            }
        },
        methods: {
            changeKey () {
                this.getqueueList()
            },
            // 左侧
            changeTabs (val) {
                this.keyword = ''
                // console.log(val,'33')
                if (val === 0) {
                    this.type = 1
                    this.getqueueList()
                } else {
                    this.type = 2
                    this.getqueueList()
                }
            },
            // 获取排队列表
            getqueueList () {
                queueList({ type: this.type, keyword: this.keyword }).then(res => {
                    if (this.jdclock) {
                        window.clearInterval(this.jdclock)
                    }
                    if (this.jzclock) {
                        window.clearInterval(this.jzclock)
                    }
                    this.totalTime = res.wait_time // 倒计时总时长
                    if (this.type === 0 || this.type === 1) {
                        this.dropsList = res.jd
                        this.jd_wait = res.jd_wait
                        if (this.jd_wait.id) {
                            const time = this.jd_wait.call_time * 1
                            // console.log(this.jd_wait, time, 'time', 1)
                            const newtime = dayjs().unix()
                            // console.log(newtime, 'newtime', 1)
                            const alltime = time + this.totalTime - newtime
                            // console.log(alltime, 'alltime', 1)
                            if (alltime > 0) {
                                this.jdtime = alltime;
                                this.jdclock = window.setInterval(() => {
                                    if (this.jdtime <= 0) {
                                        window.clearInterval(this.jdclock)
                                        this.getqueueList()
                                    } else {
                                        this.jdtime--
                                    }
                                }, 1000)
                            }
                        }
                    }
                    if (this.type === 0 || this.type === 2) {
                        this.muscleList = res.jz
                        this.jz_wait = res.jz_wait
                        if (this.jz_wait.id) {
                            const time = this.jz_wait.call_time * 1
                            // console.log(time, 'time', 2)
                            const newtime = dayjs().unix()
                            // console.log(newtime, 'newtime', 2)
                            const alltime = time + this.totalTime - newtime
                            // console.log(alltime, 'alltime', 2)
                            if (alltime > 0) {
                                this.jztime = alltime;
                                this.jzclock = window.setInterval(() => {
                                    if (this.jztime <= 0) {
                                        window.clearInterval(this.jzclock)
                                        this.getqueueList()
                                    } else {
                                        this.jztime--
                                    }
                                }, 1000)
                            }
                        }
                    }
                })
            },
            countDown (item, index, type) {
                this.type = type
                // this.totalTime = 15
                if (this.clock) {
                    window.clearInterval(this.clock)
                }
                if (this.muscleclock) {
                    window.clearInterval(this.muscleclock)
                }
                if (type === 1) {
                    queueCall({ id: item.id }).then(res => {
                        this.dropsList[index].status = 2
                        this.jdtime = this.totalTime
                    })
                } else {
                    queueCall({ id: item.id }).then(res => {
                        this.muscleList[index].status = 2
                        this.jztime = this.totalTime
                    })
                }
            },
            changeInfusion (row) {
                this.$set(this.infusion, 'id', row.id)
                this.getqueueInfo(row.id)
                this.modalstatus = true
            },
            // 获取输液信息
            getqueueInfo (val) {
                queueInfo({ id: val }).then(res => {
                    this.infusion = res
                    // console.log(this.infusion.patient.name, '1')
                })
            },
            infosave () {
                // queueInfusion
                if (!this.infusion.operate_id) {
                    this.$Message.error('请选择操作人');
                } else {
                    this.infusloading = true
                    const params = {
                        id: this.infusion.id,
                        operate_id: this.infusion.operate_id
                    }
                    queueInfusion(params).then(res => {
                        this.$Message.success('确认输液')
                        if (this.type === 1 || this.type === 0) {
                            this.jdtime = 0
                        }
                        if (this.type === 2 || this.type === 0) {
                            this.jztime = 0
                        }
                        this.infusloading = false
                        this.cancel()
                    })
                }
            },
            cancel () {
                this.infusion.operate_id = ''
                this.modalstatus = false
            },
            // 撤销排队
            changebackout (item) {
                this.$Modal.confirm({
                    title: '撤销排队',
                    content: '<p>是否确定撤销当前排队</p>',
                    onOk: () => {
                        queueCancel({ id: item.id }).then(res => {
                            this.$Message.info('撤销成功');
                            // this.getqueueList()
                        })

                        // this.show = false;
                    },
                    onCancel: () => {
                        // this.$Message.info('取消');
                    }
                });
            },
            // 右侧患者列表
            // 搜索
            changeEnter () {
                this.searchForm.date = []
                this.searchForm.clinic_id = ''
                this.searchForm.record_type = ''
                this.getpatientList()
            },
            askDatasoperate () {
                this.getpatientList()
            },
            changeClinic () {
                this.getpatientList()
            },
            changePage (page) {
                this.page = page;
                this.getpatientList()
            },
            changePageSize (pagesize) {
                this.pageSize = pagesize;
                this.getpatientList()
            },
            // 获取诊疗室
            getclinicList () {
                GetClinicList().then(res => {
                    this.clinicList = res.list
                })
                infusiontreatmentrecordtype().then(res => {
                    this.clinicLists = res
                })
            },
            // 获取患者列表
            getpatientList () {
                const params = {
                    keywords: this.searchForm.keywords,
                    start_time: this.searchForm.date[0] ? dayjs(this.searchForm.date[0]).format('YYYY-MM-DD') : '',
                    end_time: this.searchForm.date[1] ? dayjs(this.searchForm.date[1]).format('YYYY-MM-DD') : '',
                    clinic_id: this.searchForm.clinic_id,
                    record_type: this.searchForm.record_type,
                    page: this.page,
                    pageSize: this.pageSize
                }
                patientList(params).then(res => {
                    this.operatedata = res.list
                    this.total = res.total
                })
            },
            // 编辑
            edit (row) {
                this.modalDrawer = true
                this.row = row
                this.$refs.list.initial(row);
            },
            // 排队
            lineUp (row) {
                this.tags_name_arr = row.tags_name_arr
                this.getpatientdrugList(row.id)
                this.patient_user_id = row.id
                this.linestatus = true
            },
            // 获取排队列表药品
            getpatientdrugList (val) {
                patientdrugList({ id: val }).then(res => {
                    this.jdList = res.jd
                    this.lineupjdwait = res.jd_wait
                    this.lineupjzwait = res.jz_wait
                    this.jzList = res.jz
                    this.jddrugId = res.jd_wait.drug_surplus_id === undefined ? [] : res.jd_wait.drug_surplus_id
                    this.jzdrugId = res.jz_wait.drug_surplus_id === undefined ? [] : res.jz_wait.drug_surplus_id
                })
            },
            lineSave () {
                if (this.jddrugId.length > 0 && this.lineupjdwait.id === undefined) {
                    const params = {
                        patient_user_id: this.patient_user_id,
                        surplus_drug_id: this.jddrugId.join(','),
                        type: 1
                    }
                    queueCreate(params).then(res => {
                        this.$Message.success('静滴排队成功')
                        this.lineCancel()
                        // this.type = 1
                        // this.muscleList=this.copymuscleList
                    })
                }
                if (this.jzdrugId.length > 0 && this.lineupjzwait.id === undefined) {
                    const params = {
                        patient_user_id: this.patient_user_id,
                        surplus_drug_id: this.jzdrugId.join(','),
                        type: 2
                    }
                    queueCreate(params).then(res => {
                        this.$Message.success('肌注排队成功')
                        this.lineCancel()
                        // this.type = 2
                        // this.dropsList=this.copydropsList
                    })
                }
                this.lineCancel()
            },
            lineCancel () {
                this.jddrugId = []
                this.jzdrugId = []
            },
            // 打印
            printClick (row, status) {
                // console.log(row, 'row')
                this.queue_id = row.id
                this.printtype = status
                this.printData = row
                this.printDataList = []
                if (this.printData.drug_list.length > 4) {
                    let n = 4
                    for (var i = 0; i < this.printData.drug_list.length; i += n) {
                        this.printDataList.push(this.printData.drug_list.slice(i, i + n));
                        console.log(this.printDataList)
                    }
                } else {
                    this.printDataList = [this.printData.drug_list]
                }
                this.printstatus = true
            },
            printSave () {
                const params = {
                    queue_id: this.queue_id,
                    print_type: this.printtype === 1 ? 'py' : 'xs'
                }
                updatePrint(params).then(res => {
                    // console.log('请求打印成功')
                    this.getqueueList()
                })
                this.$Print(this.$refs.container);
            },
            printCancel () {

            }
        }
    }
</script>
<style lang="less">
//静滴，肌注样式
.ul{
border-bottom: 1px solid #e8eaec;
}
.items{
  // display: flex;
  // justify-content:flex-start;
  padding:10px 5px;

}
// .item_li{
//   display: flex;
//   justify-content: flex-start;
//   flex: 1;
// }
.order{
   width: 48px;
    height: 48px;
    border-radius: 50px;
    background: #ddd;
    margin-right: 12px;
    line-height: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}
.titleName{
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    margin-bottom: 12px;
    color: #515a6e;
    font-size: 16px;
    line-height: 24px;
}
.description{
  color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 24px
}
.action{
  margin-top:16px
}
.action_ac{
  position: relative;
  top:40%
}
.activeClass{
  color: rgb(255, 153, 0);
}
.activeClass:hover{
  color: rgb(255, 153, 0);
}
.info{
  display: flex;
  justify-content: flex-start;

}
.info_title{
  line-height: 25px;
}
.operator{
  margin-right: 8px;
}
.operator::before{
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
}
.lineCard{
  display: flex;
  justify-content: flex-start;
}
.drug{
  color: #000;
  border: 1px solid #999;
  width: 430px;
  height: 310px;
  padding: 16px;
  position: relative;
  margin-bottom: 25px;
}
.infobox{
  display: flex;
  align-items: center;
  padding: 9px 20px;
}
.dragname{
  // font-size: 20px;
  font-weight: 900;
  // padding: 0 12px;
//   border-bottom: 1px solid #000;
}
.dragnames{
    font-size: 22px;
}
.dragstyle{
  font-size: 18px;
  font-weight: 600;
  // padding: 0 10px;
}
.druginfo{
  // margin-bottom: 20px;
  font-family: 'Microsoft YaHei';
  display: flex;
  justify-content: flex-start;
}
.inscribe{
  position: absolute;
  bottom: 15px;
  font-size: 16px;
}
.single{
  color: #000;
//   width: 830px;
//   height:520px;
  // border: 2px solid #000;
  padding: 24px 0 24px 24px;
  font-size: 18px;
  position: relative;
  font-family:'Microsoft YaHei';
}
.moveClass{
  color:#e3d6cc;
}
.moveClass:hover{
  color:#e3d6cc;
}
.printColor{
  color: #808695;
}
.printColor:hover{
  color:#808695;
}
.table_name{
  display: flex;
  justify-content: flex-start;
}
.tableli{
  padding: 10px 0;
}
.fontstyle{
  font-size: 16px;
}
.container {
  display: grid;
  grid-template-columns: 360px 120px 120px 120px;
  grid-template-rows: 35px 55px 55px 55px 55px;
  // border: 1px solid #000;
  vertical-align:middle;
  text-align: center;
}
.containerelse {
  display: grid;
  grid-template-columns: 360px  120px 120px;
  grid-template-rows: 35px  55px 55px 55px;
  // border: 1px solid #000;
  vertical-align:middle;
  text-align: center;
}
.contbox{
    border: 1px solid black;
    margin-left: -1px;
    margin-top: -1px;
    padding: 6px 0;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
}
.drugline{
  text-align: left;
  padding: 0 10px;
  display: flex;
    flex-direction: column;
}
.ml{
    width: 100%;
  display: flex;
  justify-content: space-between;
}
.singleboxs{
    width: 780px;
    max-height: 520px;
    margin: 10px;
}
.singlebox{
    height: 520px;
    margin: 10px;
}
.name{
  padding-left: 0;
}
.line {
    display: block !important;
}
</style>
